<template>
    <a-tabs :default-active-key="defaultKey" >
      <a-tab-pane  class="tab" key="搜索">
        <span slot="tab">
          <a-icon type="search" />
          搜索
        </span>
        <slot name="searchmenu"></slot>
      </a-tab-pane>
      <a-tab-pane
        :tab="item.categoryName"
        class="tab"
        v-for="item in menu"
        :key="item.categoryName"
      >
        <FOODITEM v-for="i in item.child" :item="i" :key="i.itemName">
          <template v-slot:method>
            <slot name="do" v-bind:item="i"></slot>
          </template>
        </FOODITEM>
      </a-tab-pane>
    </a-tabs>
</template>

<script>
import FOODITEM from "@/components/foodItem.vue"
export default {
    props:{
        defaultKey:String,
        menu:Array,
        addmore:{
            require:false,
            default:false,
            type:Boolean
        }
    },
    components:{FOODITEM}
}
</script>

<style scoped>
.tab {
  width: 90%;
  height: 420px;
  overflow-y: scroll;
  padding-right: 5px;
}
.manyoutter {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.manyicon {
  height: 40px;
  width: 40px;
}
.many {
  font-size: 24px;
  font-weight: 900;
  margin: 0 8px;
}
</style>